@import "../../../assets/css/mixins";

.step-complete {
  @include flex-row-nowrap-center;
  cursor: pointer;
  align-items:stretch;
  .step-box {
    width: 50px;
    align-self: stretch;
    @include flex-column-center;
    .top-line {
      width: 2px;
      position: relative;
      flex: 1;
      .line-grey{
        position: absolute;
        top:0;
        left: 0;
        width: 2px;
        height: 100%;
        z-index: 0;
        background: #E5E5E5;
      }
      .up{
        bottom:0;
      }
      .down{
        top:0;
      }
      .line-blue{
        position: absolute;
        left: 0;
        width: 2px;
        height: 0;
        z-index: 1;
        background: #56A7FD;
        transition: all 2s;
        transition: all 2s;
        -moz-transition: all 2s;	/* Firefox 4 */
        -webkit-transition: all 2s;	/* Safari 和 Chrome */
        -o-transition: all 2s;
      }
    }
    .circle-empty-smBox{
      width: 26px !important;
      height: 26px!important;
      .circle-grey {
        left: 0!important;
        top:  0!important;
        z-index:0;

      }
      .circle-blue {
        left: 0!important;
        top:  0!important;
        z-index:1;

      }
    }
    .circle-empty-box {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      @include flex-column-center;
      justify-content: center;
      position: relative;
      .circle-grey {
        position: absolute;
        left: 7px;
        top:  7px;
        width: 26px;
        height: 26px;
        border-radius: 27px;
        background: #E5E5E5;
        color: #FFFFFF;
        text-align: center;
        line-height: 29px;
        font-size: 14px;
      }
      .circle-blue {
        position: absolute;
        left: 7px;
        top:  7px;
        width: 26px;
        height: 27px;
        border-radius: 27px;
        background: #56A7FD;
        color: #FFFFFF;
        line-height: 30px;
        font-size: 14px;
      }
      .circle-empty{
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        border: 2px solid #56A7FD;
      }
      .circle {
        width: 27px;
        height: 27px;
        z-index: 2;
        border-radius: 27px;
        background: #56A7FD;
        color: #FFFFFF;
        text-align: center;
        line-height: 28px;
        font-size: 14px;
      }
    }
  }
  .step-title-box{
    flex: 1;
  }
}
